<div layout="row" layout-align="center start">

  <card-layout body-css="md-padding" style="max-width:980px;width:980px;" flex="initial">

    <header-section>
      <div layout="row" layout-align="space-between-center" flex>
        <div class="card-title" flex>Feed Link for {{vm.feedName}}</div>
        <div>
          <ng-md-icon icon="{{vm.model.category.icon}}" size="20" style="fill:{{vm.model.category.iconColor}}"></ng-md-icon>
        </div>
      </div>
    </header-section >

    <body-section>
      <div> Each link gets:<br/><br/>
        -  The feed id ({{vm.feedId}})<br/><br/>
        - feed name: {{vm.feedName}}<br/><br/>
        - as well as the entire feed model allowing you to do various things with the feed data</div>

      <div layout="column" class="layout-padding-top-bottom">
        <span ng-class="{'enabled':vm.model.state == 'ENABLED','disabled':vm.model.state != 'ENABLED'}">
                          <ng-md-icon icon="{{vm.model.stateIcon}}" size="20" ></ng-md-icon> {{vm.model.state}}</span>
        <span class="hint">State</span>
      </div>

      <div layout="column" class="layout-padding-top-bottom">
        <span>{{vm.model.updateDate | date: 'MM/dd/yyyy h:mm:ssa'}}</span>
        <span class="hint">
                                             Last Updated
                                           </span>
     </div>

      <h2 class="md-headline">Entire JSON Model</h2>
      <pre>{{vm.model | json}}</pre>
    </body-section>
  </card-layout>



</div>